import {listNav,queryProduct} from "../../api/apis"
// const db =wx.could.database();
let navid=""; // 声明变量 navid 并初始化为空字符串
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navActive:0,// 导航栏默认选中项索引
    navArr:[],// 导航栏数据数组
    proArr:[],// 产品数据数组
    loading:false,// 是否正在加载数据
    isData:false// 是否已加载完所有数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
   async onLoad(options) {
    let {idx} = options;  // 从页面参数中获取 idx
    await this.getNavList(); // 调用获取导航列表的函数
    if(idx){
      this.navChange(idx);// 如果有 idx 参数，则切换导航
    }else{
      navid = this.data.navArr[0]._id; // 否则，默认选中第一个导航项并获取对应产品列表
      this.getProductList();
    }

  },

//获取分类导航
// getNav(){
//       db.collcetion("cpfl").get()
//       .then(res=>{
//         console.log(res);
//         this.setData({
//           navArr:res.data
//         })
//     })

// },
  async getNavList(){
    await listNav().then(res=>{// 调用接口获取导航列表数据
      this.setData({// 更新导航数据数组
        navArr:res.data
      })
      this.selectComponent("#myTabs").resize()// 调用组件方法重新计算导航栏宽度
    })
  },

  //获取产品列表
  getProductList(s=0){// 默认参数 s 设置为 0
    this.setData({// 设置加载状态为 true
      loading:true
    })
    queryProduct({ // 调用接口获取产品列表数据
      navid:navid,// 设置导航id参数
      size:s// 设置分页参数
    }).then(res=>{
       let oldArr = this.data.proArr;// 获取旧的产品数据数组
       let newArr = oldArr.concat(res.data)// 将新的产品数据与旧的数据合并
       this.setData({// 更新产品数据数组和加载状态
         proArr:newArr,
         loading:false
       })
       if(res.total == this.data.proArr.length){// 判断是否已加载完所有数据
        this.setData({
          isData:true
        })
      }
    })
  },

    //导航条切换事件
    navChange(e){
      let index = e?.detail?.index ?? e;// 获取导航栏切换索引 ,可选链运算符 ?. 和空值合并运算符 ??
      navid = this.data.navArr[index]._id// 获取对应导航id
      this.setData({ // 更新状态
        proArr:[],
        loading:false,
        isData:false,
        navActive:Number(index)
      })
      this.getProductList(); // 根据导航切换获取对应产品列表
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.isData) return;
    this.getProductList(this.data.proArr.length)
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})



// 这段代码实现了一个页面，其中包括一个分类导航栏和一个产品列表。页面加载时会首先获取分类导航数据，然后根据传入的参数确定默认选中的分类，并获取该分类下的产品列表。用户可以通过点击分类导航栏中的不同分类来切换展示不同分类下的产品列表。同时，页面支持上拉加载更多功能，当滚动到页面底部时会自动加载更多产品数据。

// 具体解释如下：

// 1. 导入了 `listNav` 和 `queryProduct` 两个 API 接口函数，用于获取分类导航和产品列表的数据。

// 2. 定义了页面的初始数据 `navActive`、`navArr`、`proArr`、`loading` 和 `isData`，分别表示当前选中的分类索引、分类导航数据、产品列表数据、加载状态和是否还有更多数据待加载。

// 3. 在页面加载时，通过 `onLoad` 函数获取页面参数 `options` 中的 `idx` 值，然后调用 `getNavList` 函数获取分类导航数据，并根据参数 `idx` 是否存在决定默认选中的分类并获取对应的产品列表。

// 4. `getNavList` 函数用于获取分类导航数据，调用 `listNav` 接口函数，并将返回的数据设置到页面的 `navArr` 中，然后调用自定义组件 `#myTabs` 的 `resize` 方法，用于重新计算导航栏的布局。

// 5. `getProductList` 函数用于获取产品列表数据，调用 `queryProduct` 接口函数，并将返回的数据拼接到原有的产品列表数据中。如果返回数据中的总数等于当前产品列表的长度，则设置 `isData` 为 `true`，表示没有更多数据可加载。

// 6. `navChange` 函数用于处理导航条切换事件，接受参数 `e`，如果传入的是事件对象，则从事件对象的 `detail` 中获取导航栏索引 `index`，否则直接使用传入的索引 `e`。然后根据索引获取对应的分类 ID，并重新设置产品列表数据、加载状态和选中的导航栏索引，并调用 `getProductList` 函数加载对应分类的产品列表数据。

// 7. 页面其他生命周期函数和事件处理函数暂时没有实现具体逻辑，保留了默认的空函数。

// 这段代码的功能是实现了一个包含分类导航和产品列表的页面，用户可以通过点击导航栏中的不同分类来切换展示不同分类下的产品列表，并支持上拉加载更多数据的功能。